<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>

    <style type="text/css">
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        div {
            width: 100%;
            height: 100%;
            background-color: white;
            padding-left: 1%;
        }

        #d1 {
            width: 90%;
            height: 5%;
            position: relative;
            background-color: white;
            font-family: "宋体";
            font-size: 14px;
            padding-top: 1%;
            padding-left: 1%;
            padding-right: 1%;
        }

        #d1-1 {
            width: 30%;
            height: 100%;

            float: left;
        }

        #d1-2 {
            width: 4%;
            height: 120%;
            background-color: #009688;
            float: right;
            margin-top: -0.5%;
        }

        #d2 {
            width: 90%;
            height: 10%;
            position: relative;

            padding-top: 1%;
            padding-left: 1%;
        }

        #d2-1 {
            width: 13%;
            height: 100%;
            float: left;
            padding-top: 1%;
        }

        #d2-1 input {
            width: 87%;
            height: 30px;
        }

        #d2-2 {
            width: 4%;
            height: 80%;
            background-color: #009688;
            float: left;
            margin-top: 0.5%;
            padding-top: 1%;
        }

        #d3 {
            width: 90%;
            height: 10%;
            position: relative;
            background-color: #EEEEEE;
            padding-top: 1%;
            padding-left: 1%;
        }

        #d3-1 {
            width: 9%;
            height: 70%;
            float: left;
            background-color: red;
            padding-top: 0.5%;
            padding-left: 1%;
        }

        #d3-2 {
            width: 9%;
            height: 70%;
            float: left;
            background-color: green;
            margin-left: 1%;
            padding-top: 0.5%;
            padding-left: 1%;
        }

        #d4 {
            width: 90%;
            height: 80%;
            position: relative;
            margin-top: 1%;
        }

        table {
            border-collapse: collapse;
            line-height: 25px;
            width: 100%;
            height: 80%;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body style="height: 100%">
<div>
    <div id="d1">

        <div id="d1-1">首页/演示/导航元素</div>
        <div id="d1-2">
            <a href="/roleQueryAll">
                <img src="../../image/update.png" width="20px" height="20px">
            </a>

        </div>
    </div>
    <hr width="90%" color="gray">
    <div id="d2">
        <form action="roleLikeQuery" method="post">
            <div id="d2-1">
                <input type="text" name="like" placeholder="角色名称">
            </div>
            <div id="d2-2">
                <a id="query" href="#">
                    <img src="../../image/search.png" width="22px" height="22px">
                    <input id="do" type="submit" style="display: none">
                </a>
            </div>
        </form>
    </div>

    <div id="d3">
        <div id="d3-1">
            <img src="../../image/delete2.png" width="20px" height="20px">
            <a id="delete" href="#">批量删除</a>
        </div>
        <div id="d3-2">
            <img src="../../image/add.png" width="20px" height="20px">
            <a href="./Adminastrator/admin/roleAdd.html">添加</a>
        </div>
    </div>
    <div id="d4">
        <table border="1">
            <tr>
                <td width="5%">
                    <input id="one" type="checkbox" value="">
                </td>
                <td>序号</td>
                <td>名称</td>
                <td>描述</td>
                <td>添加时间</td>
                <td width="9%">操作</td>
            </tr>
            <form action="/roleDeleteBatches" method="post">
                <c:forEach items="${list}" var="user">

                    <tr>
                        <td><input class="two" type="checkbox" value="${user.r_id}" name="key"></td>
                        <td>${user.r_id}</td>
                        <td>${user.r_name}</td>
                        <td>${user.r_des}</td>
                        <td>${user.r_addTime}</td>
                        <td>
                            <a href="roleQuery?id=${user.r_id}" target="i">
                                <img src="../../image/alert-circle.png" width="20px" height="20px">
                            </a>&nbsp;
                            <a href="roleUpdate?id=${user.r_id}" target="i">
                                <img src="../../image/edit-2.png" width="20px" height="20px">
                            </a>&nbsp;
                            <a href="roleDelete?id=${user.r_id}">
                                <img src="../../image/delete2.png" width="20px" height="20px">
                            </a>
                        </td>
                    </tr>

                </c:forEach>
                <input id="dosth" type="submit" style="display: none">
            </form>
            <script>
                var query = document.getElementById("query");

                query.onclick = function () {
                    var elementById = document.getElementById("do");

                    elementById.click();
                }

                var dodelete = document.getElementById("delete");

                dodelete.onclick = function () {
                    var dosth = document.getElementById("dosth");

                    dosth.click();

                }

                var one = document.getElementById("one");

                var two = document.getElementsByClassName("two");

                one.onclick = function () {
                    for (let i = 0; i < two.length; i++) {
                        two[i].checked = one.checked;
                    }
                }

                // var ones = document.getElementById("one");
                //
                // var twos = document.getElementsByClassName("two");
                //
                // for (let i = 0 ; i <twos.length;i++){
                //     var flag = true;
                //     for (var j = 0;j<twos.length;j++){
                //         twos[i].onclick = function () {
                //             if (!twos[i].checked){
                //                 flag = false;
                //                 break;
                //             }
                //         }
                //     }
                // 	ones.checked=flag;

                //}
            </script>
            <%--			<script>--%>

            <%--                var flag = false;--%>
            <%--                document.getElementsByClassName("one")[0].onclick = function () {--%>
            <%--                    console.log("jkkk");--%>
            <%--                    if(flag){--%>
            <%--                        flag = false;--%>
            <%--                        var a = document.getElementsByClassName("two");--%>
            <%--                        console.log(a);--%>
            <%--                        for(let i = 0; i < a.length; i++){--%>
            <%--                            a[i].ischecked = false;--%>
            <%--                        }--%>

            <%--                        // document.getElementsByClassName("two").isChecked = false;--%>
            <%--                    }else{--%>
            <%--                        flag = true;--%>
            <%--                        var a = document.getElementsByClassName("two");--%>
            <%--                        for(let i = 0; i < a.length; i++){--%>
            <%--                            a[i].ischecked = true;--%>
            <%--                        }--%>
            <%--                        console.log(a);--%>
            <%--                        // document.getElementsByClassName("two").isChecked = true;--%>
            <%--                    }--%>

            <%--				var dodelete = document.getElementById("delete");--%>

            <%--				dodelete.onclick=function () {--%>
            <%--					var dosth = document.getElementById("dosth");--%>

            <%--					dosth.click();--%>
            <%--				}--%>

            <%--                }--%>
            <%--			</script>--%>
        </table>
    </div>
</div>
</body>
</html>